<template>
  <div class="bg">
    <div class="vux-login">
      <img class="logo" src="../assets/vux_logo.png">
      <br/>
      <h1>业务监管系统</h1>
      <br/>
    </div>
    <group label-margin-right="4em" label-align="right">
      <x-input title="账号:" name="account" v-model="account" placeholder="please input..." type="text"/>
      <x-input title="密码:" name="password" v-model="password" type="password" placeholder="please input..."/>
    </group>
    <div style="padding:15px;">
      <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="login">登 录</x-button>
    </div>


  </div>
</template>

<script>
  import {Group, XInput, XButton, AlertModule} from 'vux'

  export default {
    components: {
      Group,
      XInput,
      XButton,
      AlertModule
    },
    data () {
      return {
        account: '',
        password: ''
      }
    },
    methods: {
      login () {
        if (this.account === '' || this.password === '') {
          AlertModule.show({
            title: '提示',
            content: this.$t('账户或密码为空！')
          })
          return
        }
        var r = this.$router
        this.$axios.get('/login', {params: {'account': this.account, 'password': this.password}}).then(res => {
          console.log(res.data)
          // var data = JSON.parse(res.data)
          var data = res.data
          sessionStorage.setItem('sessionId', data.sessionId)
          r.push('/Home/Index')
          AlertModule.show({
            title: '',
            content: this.$t('登录成功！')
          })
          setTimeout(() => {
            AlertModule.hide()
          }, 3000)
        }).catch(err => {
          AlertModule.show({
            title: '提示',
            content: this.$t('服务器访问超时！')
          })
          console.log(err)
        })
      }
    }
  }
</script>

<style>
  .vux-login {
    text-align: center;
  }

  .logo {
    width: 100px;
    height: 100px
  }

</style>
